<?php

use \app\assets\BackendAsset as Asset;
use \app\models\tableModel\AdminRoleModel;

/* @var $this yii\web\View */
?>
<el-container class="index-wrapper">
    <el-header class="top-wrapper bg-white" :class="getTopClass" height="auto" ref="mainScrollShadow">
        <el-row :inline="true" class="button-container">
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <a @click="goToIndex"><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a @click="cancel">推荐位管理</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item @dblclick.native="window.open(window.location.href)">
                        推荐位附属数据
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" class="text-right">
                <el-dropdown size="mini">
                    <el-button type="primary" size="mini">
                        更多操作
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <?php if (AdminRoleModel::checkAuth('disabled')) { ?>
                        <el-dropdown-item size="mini" @click.native="disabledItem(null)" divided>
                            批量删除
                        </el-dropdown-item>
                        <?php } ?>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-header>
    <el-main class="content-wrapper transits bg-white">
        <div class="pv-10 ph-15" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                温馨提示
                            </span>
                        </template>
                        <div class="content">
                            <p>
                                1、一些小提示: 我是提示；
                                一些小代码：<code>我是小代码</code>
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </div>
        <!-- 查询 START -->
        <?= $this->render('../common/search.php', [
            'groupFields'      => 'searchForm.group',
            'groupOtherFields' => 'searchForm.groupOther',
            'baseFields'       => 'searchForm.base',
            'moreFields'       => 'searchForm.more',
            'export'           => 'searchForm.value',
            'submit'           => 'handleCurrentChange'
        ]); ?>
        <!-- 查询 START -->
        <!-- 主列表 表格 START -->
        <el-table :data="dataList" style="width: 100%" class="" @selection-change="handleSelectionChange"
                  @sort-change="handleSortChange">

            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column fixed prop="id" label="编号" sortable="custom">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.id"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.id" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column fixed prop="from_id" label="推荐来源编号">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.from_id"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.from_id" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column fixed prop="from_type_text" label="推荐来源类型">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.from_type_text"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.from_type_text" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="update_time" label="推荐时间" width="120" sortable="custom">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light"
                                :content="scope.row.add_time_text"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.add_time_text_s"
                                  class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="sort" label="排序" width="85" title="双击修改排序" sortable="custom">
                <template slot-scope="scope">
                    <?php if (AdminRoleModel::checkAuth('sort')) { ?>
                    <div class="column-border-dashed pointer" title="双击修改排序"
                         @dblclick="showEditSort(scope.row)">
                        <el-popover placement="top" width="160"
                                    v-model="scope.row.sortEdit">
                            <el-container>
                                <el-header height="20">请输入新的排序</el-header>
                                <el-main height="40">
                                    <el-input placeholder="请输入新排序"
                                              v-model="scope.row.newSort"
                                              size="mini"></el-input>
                                </el-main>
                                <el-footer height="40">
                                    <el-row>
                                        <el-col :span="8" offset="5">
                                            <el-button type="text" class="text-danger"
                                                       size="mini"
                                                       @click="scope.row.sortEdit = false">
                                                取消
                                            </el-button>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button type="text" size="mini"
                                                       @click="sort(scope.row)">
                                                确定
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </el-footer>
                            </el-container>
                            <span v-text="scope.row.sort" title="双击编辑"
                                  class="pointer text-more-ellipsis"
                                  slot="reference">
                            </span>
                        </el-popover>
                    </div>
                    <?php } else { ?>
                    <span v-text="scope.row.sort"></span>
                    <?php } ?>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="180" class-name="operate-column">
                <template slot-scope="scope">
                    <el-button @click.native="showDetail(scope.row.data)" type="text"
                               size="small">
                        查看
                    </el-button>
                    <?php if (AdminRoleModel::checkAuth('disabled')) { ?>
                        <el-button type="text text-danger" size="small"
                                   @click.native="disabledItem(scope.row.id)">
                            删除
                        </el-button>
                    <?php } ?>
                </template>
            </el-table-column>
        </el-table>
        <!-- 主列表 表格 END -->

        <!-- 分页 START -->
        <div class="block pagination" v-if="dataTotal >= pageSize">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="page"
                           :page-sizes="[20, 50, 100, 200]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="dataTotal">
            </el-pagination>
        </div>
        <!-- 分页 END -->

        <div class="clean-80px" v-else></div>
    </el-main>
</el-container>

<!-- [推荐数据详情]弹出层 -->
<el-drawer :visible.sync="detail.showDialog" direction="rtl" size="70%" :show-close="false">
    <template slot="title">
        <h2>数据详情</h2>
    </template>
    <div class="close-btn">
        <el-button type="danger" icon="el-icon-close" @click.native="detail.showDialog = false"
                   size="medium">
    </div>
    </el-button>
    <el-scrollbar class="main-scroller">
        <el-descriptions :column="2">
            <el-descriptions-item v-for="(item, key) in detail.data" :key="key"
                                  :label="key">
                <el-image class="thumb" :src="item" :preview-src-list="[item]"
                          fit="cover" v-if="$w.isImageUrl(item)">
                </el-image>
                <span v-else>{{item}}</span>
            </el-descriptions-item>
        </el-descriptions>
    </el-scrollbar>
</el-drawer>
<!-- [推荐数据详情]弹出层 -->

<?= Asset::addCss($this, '/css/backend/position-data-index.css'); ?>

<?= Asset::addScript($this, '/js/backend/position-data-index.js'); ?>
<?= $this->registerJs('instance = new app();'); ?>
